<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useCartStore } from '@/store/cart'
// import { onShow } from '@dcloudio/uni-app'
import { useTabBarBadge } from '@/hooks'
const store = useCartStore()
const getCartList = ref(store.getCartList)
useTabBarBadge()

const goToDetail = (proid: string) => {
  uni.navigateTo({ url: '/subpkg/goods-detail/index?proid=' + proid })
}

const noop = () => {
  // console.log('---noop---')
}

const getChangeState = (proid: string, e: any) => {
  store.updateGoodsState({ proid, state: e.detail })
}

const getChangeNumer = (proid: string, num: number) => {
  store.updateGoodsNumber({ proid, num })
}

const options = [
  {
    text: '删除',
    style: {
      backgroundColor: '#c82519'
    }
  }
]

// 实现全选和反选
const isAllSelectOrNot = computed({
  get() {
    return store.isAllSelect
  },
  set(value) {
    store.selectAllOrNot({ detail: value })
  }
})

// 跟徽标相关
// onShow(() => {
//   if (store.getTotal > 0) {
//     uni.setTabBarBadge({
//       index: 2,
//       text: store.getTotal + ''
//     })
//   } else {
//     uni.removeTabBarBadge({
//       index: 2
//     })
//   }
// })

// watch(
//   () => store.getTotal,
//   newValue => {
//     if (newValue > 0) {
//       uni.setTabBarBadge({
//         index: 2,
//         text: newValue + ''
//       })
//     } else {
//       uni.removeTabBarBadge({
//         index: 2
//       })
//     }
//   },
//   {
//     immediate: true
//   }
// )
</script>

<template>
  <view v-if="getCartList.length === 0">
    <van-empty
      class="custom-image"
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
      description="购物车是空的，赶快去挑选好货"
    />
  </view>
  <view v-else class="cart-container">
    <view class="shop">
      <uni-icons type="shop" size="18" />
      <text class="shop-name">嗨购商城</text>
    </view>
    <uni-swipe-action>
      <uni-swipe-action-item
        :right-options="options"
        v-for="item in getCartList"
        :key="item.proid"
        @click="store.deleteGoodsById(item.proid)"
      >
        <view class="goods-cell" @click="goToDetail(item.proid)">
          <!-- <van-checkbox
        class="checkbox"
        :value="item.state"
        @change="getChangeState"
        :data-id="item.proid"
      ></van-checkbox> -->

          <!-- $event 代表van-checkbox的change事件本身要传递出来的值
      $event 具体是啥，你要看具体使用的组件中，是如何传递值的 -->
          <view @click.stop="noop">
            <van-checkbox
              class="checkbox"
              :value="item.state"
              @change="getChangeState(item.proid, $event)"
            ></van-checkbox>
          </view>
          <view class="img">
            <image :src="item.img" />
          </view>
          <view class="content">
            <text class="title">{{ item.proname }}</text>
            <text class="price">￥{{ item.price }}</text>
            <view @click.stop="noop">
              <!-- <uni-number-box
            class="num"
            :min="1"
            :value="item.num"
            @change="getChangeNumer(item.proid, $event)"
          ></uni-number-box> -->
              <uni-number-box
                class="num"
                :min="1"
                v-model="item.num"
              ></uni-number-box>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <van-submit-bar
      :price="store.getSelectAmount * 100"
      :disabled="store.getSelectTotal === 0"
      button-text="提交订单"
    >
      <van-checkbox
        :value="store.isAllSelect"
        @change="store.selectAllOrNot"
      />全选
      <!-- <van-checkbox v-model="isAllSelectOrNot" />全选 -->
    </van-submit-bar>
  </view>
</template>

<style lang="scss" scoped>
::v-deep .van-empty__image {
  padding-top: 200rpx;
  width: 80px;
  height: 80px;
}
.cart-container {
  overflow: auto;
  height: calc(100vh - 50px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;
    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }
  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    height: 100%;
    align-items: center;
    height: 220rpx;
    padding: 10rpx 10rpx 0rpx 20rpx;
    .checkbox {
      width: 60rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .img {
      width: 180rpx;
      height: 180rpx;
      margin: 0rpx 10rpx;
      display: flex;
      align-items: center;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      .title {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        color: #323233;
        font-size: 28rpx;
      }
      .price {
        color: red;
        font-size: 26rpx;
        margin: 16rpx 0;
      }
      .num {
        display: flex;
        margin-right: 20rpx;
        justify-content: flex-end;
      }
    }
  }

  .delete-button {
    height: 100%;
  }
  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
  }
}
</style>
